<template>
  <view class="content">
    <!-- 商品列表 -->
    <view>
      <view class="warehousing_list" v-if="detaillist.length > 0">
        <view
          class="warehousing_item"
          v-for="(item, index) in detaillist"
          :key="index"
        >
          <!-- 复选框 -->
          <view class="d-flex">
            <checkbox-group @change="changeitem(item)" checked class="checkbox"
              ><checkbox :checked="item.checked"
            /></checkbox-group>

            <!-- 修改 -->
            <view class="">
              <u-icon
                name="edit-pen"
                color="#9e9d9d"
                @click="handleSkuEdit(item.id)"
              ></u-icon>
            </view>
          </view>
          <view class="warehousing_itemcontent">
            <view class="warehousing_content">
              <text class="text-weight">规格名:</text
              ><text>{{ item.goodsskuvalue.name }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">规格属性:</text
              ><text>{{ item.goodsskuvalue.value }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">库存:</text>
              <text>{{ item.stock }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">租赁区库存:</text
              ><text>{{ item.lease_stock }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">出售区库存:</text>
              <text>{{ item.sale_stock }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">仓库:</text>
              <text>{{ item.show_stock }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">清洗中库存:</text>
              <text>{{ item.clean_stock }}</text>
            </view>
            <view class="warehousing_content">
              <text class="text-weight">正在租赁:</text>
              <text>{{ item.leasing_num }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else
        ><u-empty style="text-align: center" text="暂无详情数据"></u-empty
      ></view>
    </view>
    <view class="jiesuan">
      <view class="pay-btn">
        <checkbox-group style="margin-right: 20rpx" @change="selectAll"
          ><checkbox :checked="allChecked">全选</checkbox></checkbox-group
        >
        <u-button
          @click="handlePrint()"
          type="primary"
          shape="circle"
          size="medium"
          >打印标签</u-button
        >
      </view>
    </view>
    <modal
      v-if="showPop"
      title="请输入打印标签数量"
      confirm-text="确定"
      cancel-text="取消"
      @cancel="cancelPop"
      @confirm="confirmPop"
    >
      <input
        type="number"
        placeholder="请输入打印数量"
        v-model="biaoqiannumber"
      />
    </modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品详情列表
      detaillist: [],
      //   商品id
      goodsid: "",
      showPop: false, //弹窗
      biaoqiannumber: "1",
      checkList: [], //选中值
      allChecked: false, //是否全选
    };
  },
  methods: {
    // 修改商品sku
    handleSkuEdit(id) {
      console.log(id);
      uni.navigateTo({
        url: "../skuedit/skuedit?id=" + id,
      });
    },
    //单选
    changeitem(item) {
      console.log(item);
      // item.store_clear_id;
      item.checked = !item.checked;
      if (!item.checked) {
        this.allChecked = false;
      } else {
        // 判断每一个商品是否是被选择的状态
        const cartList = this.detaillist.every((item) => {
          return item.checked === true;
        });
        if (cartList) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      }
    },
    //全选，全不选
    selectAll() {
      this.allChecked = !this.allChecked;
      if (this.allChecked) {
        this.detaillist.map((item) => {
          item.checked = true;
        });
      } else {
        this.detaillist.map((item) => {
          item.checked = false;
        });
      }
    },
    //   打印标签
    handlePrint() {
      this.showPop = true;
    },

    //弹窗确认事件
    confirmPop() {
      var that = this;
      that.checkList = [];
      that.detaillist.map((item) => {
        if (item.checked) {
          return that.checkList.push(item.id);
        }
      });
      //确认
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/goodsSkuPrint",
        method: "POST",
        data: {
          num: this.biaoqiannumber,
          skuid: that.checkList,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 0) {
            uni.showToast({
              title: res.data.msg,
              icon: "error",
              duration: 2000,
            });
          } else if (res.data.code == 1) {
            uni.showToast({
              title: res.data.msg,
              icon: "success",
              duration: 2000,
            });
            that.cancelPop();
          }
        },
      });
    },
    cancelPop() {
      //取消
      this.biaoqiannumber = "1";
      this.showPop = false;
    },
    getGoodsDetailList() {
      uni.request({
        url: "http://gxyckf.1qit.com/api/admin.goods/goodsSkuList",
        data: {
          goods_id: this.goodsid,
        },
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          if (res.data.code == 1) {
            console.log(res.data.data);
            this.detaillist = res.data.data;
            console.log(this.detaillist);
          }
        },
      });
    },
  },
  mounted() {
    this.getGoodsDetailList();
  },
  onLoad(option) {
    console.log(option.id);
    this.goodsid = option.id;
  },
};
</script>

<style>
page {
  background: #f6f6f6;
}
.usersearch {
  width: 90%;
  padding: 2% 5%;
  background: #fff;
}
.classification_list {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.classification_item {
  margin: 0 20rpx;
  padding: 20rpx;
  text-align: center;
}
/* 分类列表当前项 */
.category-item-active {
  color: #2979ff;
  border-bottom: 1px solid #2979ff;
}
.warehousing_list {
  width: 90%;
  margin: 0 5%;
}
.warehousing_item {
  background: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
  box-shadow: 2rpx 2rpx 10rpx #eee;
  padding: 20rpx;
}
.warehousing_itemtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.warehousing_itemtop image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}
.warehousing_edit {
  width: 450rpx;
}
.warehousing_edit view:nth-child(1) {
  color: #424242;
}
.goodsspecifications {
  font-size: 28rpx;
  color: #a9a9a9;
  margin: 2% 0;
}
.goodsspecifications text {
  margin-right: 2%;
}
.goodsadd {
  position: fixed;
  bottom: 20rpx;
  right: 20rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}
.goodstop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goodstopname {
  width: 400rpx;
}
.goodstopoperation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90rpx;
}
.warehousing_edit {
  width: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.loading-text {
  height: 80upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.jiesuan {
  overflow: hidden;
  width: 100%;
  position: fixed;
  box-shadow: 0 0 20rpx #ccc;
  background: #fff !important;
  /* opacity: 0.8; */
  padding-top: 10rpx;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.pay-btn {
  text-align: right;
  justify-content: flex-end;
  padding-top: 30rpx;
  display: flex;
  align-items: center;
}
.text-weight {
  font-weight: 600;
}
.warehousing_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
